// 注册组件
import React from 'react';
import { connect } from 'react-redux';
import { Form, Input, Button, } from 'antd';
import { register } from '../../redux/user-redux';

const FormItem = Form.Item;

@connect(state => state.user, {register})
class RegistrationForm extends React.Component {
  state = {
    confirmDirty: false,
    autoCompleteResult: [],
  };
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        // 注册请求
        this.props.register(values);
      }
    });
  }

  handleConfirmBlur = (e) => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  }

  compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('两次输入的密码不一致');
    } else {
      callback();
    }
  }

  validateToNextPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  }

  render() {
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };

    return (
    	<div>
	      <Form onSubmit={this.handleSubmit} className="register-form">
	        <FormItem
	          {...formItemLayout}
	          label={(
	            <span>
	              用户名
	            </span>
	          )}
	        >
	          {getFieldDecorator('username', {
	            rules: [{ required: true, message: '请输入用户名', whitespace: true }],
	          })(
	            <Input />
	          )}
	        </FormItem>
	        <FormItem 
	          {...formItemLayout}
	          label="邮箱"
	        >
	          {getFieldDecorator('email', {
	            rules: [{
	              type: 'email', message: '邮箱格式不正确',
	            }, {
	              required: true, message: '请输入邮箱',
	            }],
	          })(
	            <Input />
	          )}
	       		{/* 错误提示 */}
	          { this.props.msg ? <span className="error-msg">{this.props.msg}</span> : null }
	        </FormItem>
	        <FormItem
	          {...formItemLayout}
	          label="密码"
	        >
	          {getFieldDecorator('password', {
	            rules: [{
	              required: true, message: '请输入密码',
	            }, {
	              validator: this.validateToNextPassword,
	            }],
	          })(
	            <Input type="password" />
	          )}
	        </FormItem>
	        <FormItem
	          {...formItemLayout}
	          label="确认密码"
	        >
	          {getFieldDecorator('confirm', {
	            rules: [{
	              required: true, message: '请再次输入密码',
	            }, {
	              validator: this.compareToFirstPassword,
	            }],
	          })(
	            <Input type="password" onBlur={this.handleConfirmBlur} />
	          )}
	        </FormItem>
	        <FormItem {...tailFormItemLayout}>
	          <Button type="primary" htmlType="submit" className="register-btn">
	          注 册</Button>
	          已有账号 <a onClick={this.login}>现在去登录</a>
	        </FormItem>
	      </Form>
      </div>
    );
  }
}

const Register = Form.create()(RegistrationForm);
export default Register;